<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<style>
  h2 {
    margin: 10px 0!important;
  }

  header {
    /*background: url("./img/banner.png") no-repeat center center;*/
    background-color: #7D26A8;
    width: 100%;
    height: 243px;
    text-align: center;
  }

  nav .indexFirst {
    background-color: #7D26A8;
    height: 40px;
    line-height: 40px;
  }

  nav .indexFirst li {
    float: left;
    list-style: none;
    /*width: 10%;*/
    width: 120px;
    color: white;
  }

  .indexSecond {
    display: none;
    position: absolute;
    background-color: #7D26A8;
    padding: 0;
    width: 120px;
    height: 180px;
  }

  .indexSecond li {
    width: 120px!important;
    text-align: center;
    line-height: 42px;
  }

  nav .indexFirst li:nth-child(2):hover .indexSecond {
    display: block;
  }

  article {
    width: 100%;
    height: 380px;
    /*border: 1px solid red;*/
  }

  article aside {
    float: left;
    width: 70%;
    height: 100%;
    /*border: 1px solid green;*/
    padding-left: 20px;
  }

  article aside span {
    display: block;
    margin: 5px 0;
  }

  article aside p {
    text-indent: 2rem;
  }

  article section {
    position: relative;
    float: right;
    width: 25%;
    height: 100%;
    /*border: 1px solid blue;*/
  }

  article section .above {
    margin: 0;
    height: 40%;
    width: 100%;
    /*border: 1px solid #0be898;*/
    padding-left: 5px;
  }

  article section .above li {
    list-style: none;
    line-height: 30px;
  }

  article section .bottom {
    position: absolute;
    bottom: 0;
    margin: 0;
    height: 40%;
    width: 100%;
    /*border: 1px solid #f39505;*/
    padding-left: 5px;
  }

  article section .bottom a {
    display: block;
    margin: 10px;
  }

  article section .bottom img {
    width: 200px;
    height: 100px;
  }

  footer {
    text-align: center;
    margin-top: 15px;
  }
</style>

<body>
  <header>
    <img src="./img/banner.png" alt=""/>
  </header>
  <nav>
    <ul class="indexFirst">
      <li>首页</li>
      <li>
        会议通知
        <ul class="indexSecond">
          <li>会议记录</li>
          <li>通知公告</li>
          <li>会议事项</li>
          <li>会议大纲</li>
        </ul>
      </li>
      <li>潍坊介绍</li>
      <li>会议日程</li>
      <li>图文报道</li>
      <li>宾馆交通</li>
      <li>资料下载</li>
      <li>会议注册</li>
      <li>联系我们</li>
    </ul>
  </nav>
  <article>
    <aside>
      <h2>会议概要</h2>
      <span>2015年CERNET华东北地区教育信息化技术研讨大会</span>
      <span>时间：2015年4月22日至4月25日</span>
      <span>报到时间：2015年4月22日</span>
      <span>地点：山东省潍坊市</span>
      <span>会议主题：先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。</span>
      <span>主办：CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心、山东省教育技术与装备协会</span>
      <span>承办：潍坊医学院</span>

      <h2>会议介绍</h2>
      <p>2015年4月22-25日，由CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心及山东省教育技术与装备协会联合主办，潍坊医学院承办的中国教育和科研计算机网(CERNET)2015年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业界专家作专家报告。</p>
    </aside>
    <section>
      <figure class="above">
        <h2>会议动态</h2>
        <ul>
          <li>潍坊天气</li>
          <li>在线注册</li>
          <li>修改信息</li>
        </ul>
      </figure>
      <figure class="bottom">
        <a href="javascript:;">宾馆地址</a>
        <img src="./img/map.png" alt=""/>
      </figure>
    </section>
  </article>

  <footer>
    &copy;Copyright CERNET华东北地区网络中心. Design By 潍坊医学院网络信息中心
  </footer>
</body>
</html>
